<script setup>
	import * as api from "@/api/discover_api.js";
	import { musicStore } from "@/store/music.js";
	const music = musicStore();
	const router = useRouter();
	const swiperList = ref([]);
	const songSheet = ref([]);
	const getImgUrl = async () => {
		const res = await api.getDiscoverBanner();
		const rec = await api.privateFM();
		const rea = await api.recommendResource();
		console.log(rec, rea);
		songSheet.value = rea.recommend;
		swiperList.value = res.banners;
	};
	onMounted(() => {
		getImgUrl();
	});
	import { Swiper, SwiperSlide } from "swiper/vue";
	// 引入swiper样式（按需导入）
	import "swiper/css/pagination"; // 轮播图底面的小圆点
	import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
	const modules = [Autoplay, Pagination, Navigation, Scrollbar];
	const handleRoute = () => {
		router.push("/recommend/index");
	};
	//计算数量为多少万
	const computedCount = (count) => {
		if (count >= 10000) {
			return (count / 10000).toFixed(1) + "万";
		} else {
			return count.toString();
		}
	};
	const handleDetail = async (id) => {
		const res = await api.playlistDetail(id);
		let musicId = res.playlist.tracks[0].id;
		music.musicList = res.playlist.tracks;
		music.musicInfo = res.playlist.tracks[0].al;
		music.singerName = res.playlist.tracks[0].ar[0].name;
		console.log(music.musicInfo);
		const rec = await api.songUrl(musicId, "standard");
		music.musicUrl = rec.data[0].url;
		console.log(rec);
	};
</script>

<template>
	<div>
		<swiper
			:modules="modules"
			:loop="true"
			:slides-per-view="1"
			:space-between="50"
			:autoplay="{ delay: 4000, disableOnInteraction: false }"
			:pagination="{ clickable: true }"
			:scrollbar="{ draggable: false }"
			class="swiperBox">
			<swiper-slide
				v-for="(item, index) in swiperList"
				:key="index"
				class="rounded-lg">
				<el-image
					style="width: 100%; height: 100%; overflow: hidden"
					:src="item.imageUrl" />
				<div class="imageTag">
					<span>{{ item.typeTitle }}</span>
				</div>
			</swiper-slide>
		</swiper>
		<div class="pt-5">
			<span class="text-xl">推荐歌单 ></span>
			<el-scrollbar>
				<div>
					<el-scrollbar>
						<div
							class="pt-7"
							style="display: inline-flex">
							<div
								v-for="item in songSheet"
								:key="item.id"
								style="
									position: relative;
									border-radius: 10px;
									width: 200px;
									height: 200px;
									margin: 10px;
								">
								<img
									:src="item.picUrl"
									style="
										border-radius: 10px;
										width: 200px;
										height: 200px;
										margin: 10px;
									" />
								<Antd-CustomerServiceTwotone class="playcount" />
								<Antd-PlayCircleFilled
									class="play"
									@click="handleDetail(item.id)" />
								<span class="count">{{
									item.playcount ? computedCount(item.playcount) : ""
								}}</span>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.swiperBox {
		width: 100%;
		height: 300px;
		border-radius: 10px;
	}
	:deep(.swiper-pagination-bullet) {
		background: #ffffff;
	}
	.imageTag {
		position: absolute;
		bottom: 10px;
		left: 10px;
		background-color: rgb(226, 230, 234, 0.5);
		border-radius: 10px;
		padding: 2px;
		z-index: 999;
		span {
			// font-weight: bold;
			font-size: 12px;
			color: black;
		}
	}
	@keyframes slide-up {
		0% {
			transform: translateY(100%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	.song-sheet {
		width: 200px;
		height: 200px;
		background-color: #ffffff;
		border-radius: 10px;
		margin: 10px;
	}
	.scrollbar-flex-content {
		display: flex;
	}
	.scrollbar-demo-item {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 50px;
		margin: 10px;
		text-align: center;
		border-radius: 4px;
		background: var(--el-color-danger-light-9);
		color: var(--el-color-danger);
	}
	.playcount {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 20px;
		height: 20px;
		color: #ffffff;
	}
	.play {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40px;
		height: 40px;
		color: #ffffff;
		//鼠标变成手指
		cursor: pointer;
	}
	.play:hover {
		//放大
		transform: scale(1.2);
	}
	.count {
		position: absolute;
		top: 10px;
		left: 30px;
		color: #ffffff;
	}
</style>
